<!-- 顶部的菜单组件 -->
<template>
  <div
    class="top-menu"
    @mouseenter="mouseenterMain"
    @mouseleave="mouseleaveMain"
    @mousedown="mousedownMain"
    @mouseup="mouseupMain"
    @dblclick="dblclickMain"
    @contextmenu.prevent="rightClickMain"
  >
    <div class="top-menu-name">
      <span>幻影签</span>
    </div>
    <ul class="top-menu-list" title="设置">
      <li class="menu-list-item">
        <svg @click="icon1" class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
          <path
            d="M589.312 498.176c0-34.816 22.016-64.512 52.736-76.288-7.168-28.672-18.432-55.808-33.28-80.896-30.208 13.312-66.56 7.68-91.136-16.896-24.576-24.576-30.208-60.928-16.896-91.136-25.088-14.336-52.224-25.6-80.896-33.28-11.776 30.72-41.472 52.736-76.288 52.736-34.816 0-64.512-22.016-76.288-52.736-28.672 7.168-55.808 18.432-80.896 33.28 13.312 30.208 7.68 66.56-16.896 91.136s-60.928 30.208-91.136 16.896c-14.848 25.088-26.112 52.224-33.28 80.896 30.72 11.776 52.736 41.472 52.736 76.288 0 34.816-22.016 64.512-52.736 76.288 7.168 28.672 18.432 55.808 33.28 80.896 30.208-13.312 66.56-7.68 91.136 16.896 24.576 24.576 30.208 60.928 16.896 91.136 25.088 14.848 52.224 26.112 80.896 33.28 11.776-30.72 41.472-52.736 76.288-52.736 34.816 0 64.512 22.016 76.288 52.736 28.672-7.168 55.808-18.432 80.896-33.28-13.312-30.208-7.68-66.56 16.896-91.136 24.576-24.576 60.928-30.208 91.136-16.896 14.848-25.088 26.112-52.224 33.28-80.896-30.72-11.776-52.736-40.96-52.736-76.288z m-245.76 81.92c-45.056 0-81.92-36.864-81.92-81.92s36.864-81.92 81.92-81.92 81.92 36.864 81.92 81.92-36.864 81.92-81.92 81.92zM680.448 233.472h298.496v75.264h-298.496zM680.448 536.576h298.496v75.264h-298.496zM196.608 839.68h782.336v75.264H196.608z"
          ></path>
        </svg>
      </li>
      <li class="menu-list-item" title="收起">
        <svg @click="icon2" class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
          <path
            d="M511.953455 102.353455a409.646545 409.646545 0 1 0 409.69309 409.553454A409.6 409.6 0 0 0 512 102.306909z m0 921.646545C229.050182 1024 0 794.717091 0 512S229.236364 0 511.906909 0C794.624 0 1024 229.143273 1024 511.860364 1024 794.717091 794.763636 1024 511.906909 1024z"
          ></path>
          <path
            d="M330.658909 420.072727l182.085818 156.485818 182.085818-156.485818a47.802182 47.802182 0 0 1 60.695273 0.046546 33.28 33.28 0 0 1 0 52.084363l-212.433454 182.597819a46.266182 46.266182 0 0 1-29.789091 10.798545h-0.605091a46.359273 46.359273 0 0 1-30.254546-10.798545L269.963636 472.250182a33.326545 33.326545 0 0 1-0.093091-52.130909 47.802182 47.802182 0 0 1 60.881455 0h-0.093091z"
          ></path>
        </svg>
      </li>
      <li class="menu-list-item" title="最小化">
        <svg @click="icon3" class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
          <path
            d="M511.953455 102.353455a409.646545 409.646545 0 1 0 409.69309 409.553454A409.6 409.6 0 0 0 512 102.306909z m0 921.646545C229.050182 1024 0 794.717091 0 512S229.236364 0 511.906909 0C794.624 0 1024 229.143273 1024 511.860364 1024 794.717091 794.763636 1024 511.906909 1024z"
          ></path>
          <path
            d="M213.333333 488.333333m42.666667 0l512 0q42.666667 0 42.666667 42.666667l0 0q0 42.666667-42.666667 42.666667l-512 0q-42.666667 0-42.666667-42.666667l0 0q0-42.666667 42.666667-42.666667Z"
          ></path>
        </svg>
      </li>
    </ul>
  </div>
</template>

<script>
const { ipcRenderer } = window.electron;
export default {
  name: '',
  data() {
    return {};
  },
  components: {},
  methods: {
    /**
     * 渲染进程和主进程之间的通信
     */
    mouseenterMain() {
      // 鼠标移入
    },
    mouseleaveMain() {
      // 鼠标移除
    },
    mousedownMain() {
      // 鼠标按下
      ipcRenderer.send('window-move-open-mainWindow', true);
    },
    mouseupMain() {
      // 鼠标松开
      ipcRenderer.send('window-move-open-mainWindow', false);
    },
    rightClickMain() {
      // 鼠标右击
      ipcRenderer.send('window-move-open-mainWindow', false);
    },
    dblclickMain() {
      // 鼠标双击
    },
    icon1() {
      // 设置
      ipcRenderer.send('mainWindow', { message: 'set' });
    },
    icon2() {
      // 收起并显示悬浮球
      ipcRenderer.send('mainWindow', { message: 'pack' });
    },
    icon3() {
      // 最小化
      ipcRenderer.send('mainWindow', { message: 'minimize' });
    },
  },
};
</script>

<style scoped>
.top-menu {
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.top-menu-name {
  float: left;
  font-size: 14px;
  margin-left: 8px;
}
.top-menu-list {
  list-style: none;
  float: right;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.menu-list-item {
  width: 16px;
  height: 16px;
  margin: 6px 8px;
}
.icon {
  fill: rgba(255, 255, 255, 0.6);
}
.icon:hover {
  fill: rgba(255, 255, 255, 1);
}
</style>
